<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="props.rules"
    :label-position="props.position"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <!-- 输入 -->
    <template v-for="(item, index) in props.formList" :key="index">
      <el-form-item v-if="item.type === 'input'" :label="item.label" :prop="item.model">
        <el-input v-model="ruleForm[item.model]" />
      </el-form-item>
      <!-- 下拉 -->
      <el-form-item v-if="item.type === 'select'" :label="item.label" :prop="item.model">
        <el-select v-model="ruleForm[item.model]" :placeholder="item.placeholder">
          <el-option v-for="(sele, index) in item.data" :key="index" :label="sele.label" :value="sele.value" />
        </el-select>
      </el-form-item>
      <!-- 备注 -->
      <el-form-item v-if="item.type === 'textarea'" :label="item.label" :prop="item.model">
        <el-input v-model="ruleForm[item.model]" maxlength="200" show-word-limit type="textarea" />
      </el-form-item>
      <!-- 级联 -->
      <el-form-item v-if="item.type === 'cascader'" :label="item.label" :prop="item.model">
        <el-cascader
          ref="myCascader"
          style="width: 100%"
          v-model="ruleForm[item.model]"
          :options="item.options"
          clearable
          @change="getCheckedNodes"
        />
      </el-form-item>
    </template>
    <div class="btn" v-if="isShowBtn">
      <el-button type="" @click="handelClickBack">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
    </div>
  </el-form>
</template>

<script setup>
/* 修改订单状态
 * @param  formList 表单列表
 */
/* rules
 * @param  rules 表单规则
 */
import { ref, defineProps, defineEmits, onMounted } from "vue";
const emits = defineEmits(["update", "back"]);
const props = defineProps({
  formList: {
    type: Array,
    default() {
      return [];
    }
  },
  rules: {
    type: Object,
    default() {
      return {};
    }
  },
  position: {
    type: String,
    default() {
      return "left";
    }
  },
  isShowBtn: {
    type: Boolean,
    default() {
      return true;
    }
  }
});
const myCascader = ref();
const ruleFormRef = ref();
const ruleForm = ref({});
import china from "@/utils/china.json";
const chinas = ref(china);
const detailAdess = ref();
// 校验
const submitForm = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      emits("update", ruleForm.value, detailAdess.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 取消
const handelClickBack = () => {
  emits("back");
};
// const handleChange = (value, selectedData) => {

// };
function getCheckedNodes(value) {
  let obj = {};
  chinas.value.map(it => {
    if (it.value === value[0]) {
      obj = it;
    }
  });
  let obj1 = {};
  obj.children.map(it => {
    if (it.value == value[1]) {
      obj1 = it;
    }
  });
  let obj2 = {};
  obj1.children.map(it => {
    if (it.value == value[2]) {
      obj2 = it;
    }
  });
  detailAdess.value = obj.label + obj1.label + obj2.label;
}

onMounted(() => {
  chinas.value.map(item => {
    // 第一层
    item.label = item.name;
    item.value = item.cityCode;
    // eslint-disable-next-line no-prototype-builtins
    if (item.hasOwnProperty("children")) {
      console.log("第二层");
      // 第二层
      item.children.map(citem => {
        citem.label = citem.name;
        citem.value = citem.cityCode;
        // eslint-disable-next-line no-prototype-builtins
        if (citem.hasOwnProperty("children")) {
          // 第三层
          citem.children.map(ccitem => {
            ccitem.label = ccitem.name;
            ccitem.value = ccitem.cityCode;
          });
        }
      });
    }
  });
});
</script>
<style scoped lang="scss">
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 0 0;
}
</style>
